<template>
  <div ref="realDataCharts" class="dataChart" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'RealDataCharts',
  props: {
    jamsTotalRate: {
      type: String,
      default: () => String
    }
  },
  data () {
    return {
      charts: '',
      timer: '',
      value: ''
    }
  },
  watch: {
    jamsTotalRate (newV, oldV) {
      this.initData(newV)
    }
  },
  // 调用
  mounted () {
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initData (data) {
      this.value = parseFloat(data)
      this.drawPie(this.value)
    },
    drawPie (pieData) {
      this.charts = echarts.init(this.$refs.realDataCharts)
      this.charts.setOption({
        title: {},
        tooltip: {
          formatter: '{a} <br/>{c} {b}'
        },
        series: [
          {
            type: 'pie',
            zlevel: 1,
            silent: true,
            radius: ['98%', '97%'],
            hoverAnimation: false,
            color: 'rgba(88,142,197,0.5)',
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [1]
          },
          {
            type: 'pie',
            zlevel: 2,
            silent: true,
            radius: ['90%', '91%'],
            startAngle: 50,
            hoverAnimation: false,
            // animation:false,    //charts3 no
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie2()
          },
          {
            type: 'pie',
            zlevel: 3,
            silent: true,
            radius: ['88%', '87%'],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie2()
          },
          {
            type: 'pie',
            zlevel: 4,
            silent: true,
            radius: ['84%', '83%'],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie3()
          },
          {
            type: 'pie',
            zlevel: 5,
            silent: true,
            radius: ['80%', '78%'],
            color: ['#fc8d89', '#46d3f3', 'rgba(203,203,203,.2)'],
            startAngle: 50,
            hoverAnimation: false,
            // animation:false,    //charts3 no
            label: {
              normal: {
                show: false
              }
            },
            data: [50, 20, 40]
          },
          {
            name: '',
            type: 'gauge',
            splitNumber: 30, // 刻度数量
            min: 0,
            max: 100,
            radius: '73%', // 图表尺寸
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              lineStyle: {
                width: 0,
                shadowBlur: 0,
                color: [[1, '#0dc2fe']]
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: 'auto',
                width: 2
              },
              length: 20,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              // 仪表盘指针
              show: 0
            },
            detail: {
              show: 0
            }
          },
          {
            name: '',
            type: 'gauge',
            splitNumber: 30, // 刻度数量
            min: 0,
            max: 100,
            radius: '68%', // 图表尺寸
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: true,
              lineStyle: {
                width: 0,
                shadowBlur: 0,
                color: [
                  [0, '#0dc2fe'],
                  [1, '#0dc2fe']
                ]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#0dc2fe',
                width: 2
              },
              length: 20,
              splitNumber: 5
            },
            splitLine: {
              show: true,
              length: 20,
              lineStyle: {
                color: '#0dc2fe'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              // 仪表盘指针
              show: 0
            },
            title: {
              color: '#fff',
              fontSize: 10,
              fontWeight: 900
            },
            detail: {
              borderColor: '#fff',
              shadowColor: '#fff', // 默认透明
              shadowBlur: 2,
              offsetCenter: [0, '20%'], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#fff',
                fontSize: 40,
                center: 'center'
              },
              formatter: '{value}'
            },
            data: [
              {
                value: pieData,
                name: '交通拥堵指数'
              }
            ]
          },
          {
            type: 'pie',
            zlevel: 20,
            silent: true,
            radius: ['60%', '59%'],
            hoverAnimation: false,
            color: '#2dc0c9',
            // animation:false,
            data: [1],
            labelLine: {
              normal: {
                show: false
              }
            }
          },
          {
            name: '中间环形图',
            type: 'pie',
            radius: ['35%', '55%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: '#80ADD2',
                borderColor: '#3D4268'
              }
            },
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {}
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
      this.timer = setInterval(() => {
        var option = this.charts.getOption()
        option.series[1].startAngle = option.series[1].startAngle - 1
        option.series[2].startAngle = option.series[2].startAngle - 1
        option.series[3].startAngle = option.series[3].startAngle - 1
        option.series[4].startAngle = option.series[4].startAngle - 1
        // option.series[5].startAngle = option.series[5].startAngle - 1
        option.series[6].data[0].value = this.randomExtend(option.series[6].data[0].value)
        this.charts.setOption(option)
      }, 3000)

      //  setTimeout(this.startTimer(), 500)
      // this.timer = setInterval(this.doing(), 100)
      // 鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。

      /*  this.charts.on('mouseover', function(params) {
        this.stopTimer()
      })

      this.charts.on('mouseout', function(params) {
        this.startTimer()
      }) */
    },
    /*     doing () {
      const option = this.charts.getOption()
      option.series[1].startAngle = option.series[1].startAngle - 50
      option.series[2].startAngle = option.series[2].startAngle - 50
      option.series[3].startAngle = option.series[3].startAngle - 50
      option.series[6].data[0].value = this.randomExtend(option.series[6].data[0].value)
      this.charts.setOption(option, true)
    },
    startTimer () {
      this.timer = setInterval(this.doing(), 500)
    }, */

    stopTimer () {
      clearInterval(this.timer)

      this.timer = null
    },
    pie2 () {
      const dataArr = []
      for (var i = 0; i < 8; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: 'rgba(88,142,197,0.5)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        }
      }
      return dataArr
    },
    pie3 () {
      const dataArr = []
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: 'rgb(126,190,255)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: 'rgba(0,0,0,0)'
              }
            }
          })
        }
      }
      return dataArr
    },
    randomExtend (minNum) {
      if (arguments.length === 1) {
        return parseFloat(Math.random() * 10).toFixed(2)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.dataChart {
  width: 100%;
  height: 220px;
  margin-top: 60px;
}
</style>
